<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2022 APThink David唐 all rights reserved.
 * 版权所有，侵权必究！
 *
-->
<script setup lang="ts">
import { appStore } from '@/stores/app'
const app = appStore()

import router from '../router'
import LANGUAGE from '@/locales/lang.json'
import CountryFlag from 'vue-country-flag-next'
import { exitScreen, fullScreen } from '@/utils'
function getCountryFlag(data: string) {
  if (data == 'zh') return 'cn'
  if (data == 'en') return 'us'
  return data
}
function onClickLogin() {
  router.push('/login')
}
function onClickLogout() {
  app.logout()
}
function onClickChangeScreen() {
  const isFullScreen = document.fullscreenElement
  if (isFullScreen) {
    exitScreen()
    // this.fullScreen = false;
  } else {
    fullScreen()
    // this.fullScreen = true;
  }
}
</script>

<template>
  <el-row>
    <el-col :span="14">
      <el-icon @click="app.toggleMenuCollapse">
        <Menu />
      </el-icon>
      {{ $t('apptitle') }}
    </el-col>
    <el-col :span="10" class="right-align">
      <el-space>
        <!-- <el-avatar v-if="app.isLogin" :size="50" :src="userPhoto" /> -->
        <el-button
          link
          text
          size="small"
          v-if="!app.isLogin"
          icon="UserFilled"
          @click="onClickLogin"
          >{{ $t('button.login') }}</el-button
        >
        <el-button link text size="small" v-if="app.isLogin" icon="User" @click="onClickLogout">{{
          $t('button.logout')
        }}</el-button>
        <el-button link text size="small" icon="FullScreen" @click="onClickChangeScreen">{{
          $t('button.screen')
        }}</el-button>
  <el-tooltip :content="$t('button.changelanguage')" placement="left" :disabled="app.disableTip">
        <el-dropdown size="small" @command="app.changeLanguage">
          <el-button link text size="small"
            ><country-flag :country="getCountryFlag(app.currentLanguage)" size="small" />
            <!-- {{ $t('button.language') }} -->
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="l in LANGUAGE" :key="l.value" :command="l.value">
                <el-button link text size="small" :disabled="l.value==app.currentLanguage"
                  ><country-flag :country="getCountryFlag(l.value)" size="small" />{{ l.text }}
                </el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        </el-tooltip>
      </el-space>
    </el-col>
  </el-row>
</template>
<style scoped>
.right-align {
  display: flex;
  justify-content: flex-end;
}
</style>
